<template>
<t-card title="护理项目条件查询" :bordered="false" hover-shadow>
        <!-- 插槽，右上角的操作区域
          css中动态计算样式的： 不同的单位可以相加
          ref：是为了js中操作dom，找到dom用的，提交的时候会用到
        -->
         <t-form
            :data="formData"
            labelWidth="calc(8em + 24px)"
            layout="inline"
            ref="nusrong_project_form"
            @reset="onReset"
            @submit="onSubmit"
          >
            <t-form-item label="护理项目名称" name="name">
              <t-input v-model="formData.name" placeholder="请输入护理项目名称"></t-input>
            </t-form-item>
            <t-form-item label="状态" name="status">
              <t-cascader v-model="formData.status" placeholder="请选择状态" :options="statusOptions" clearable filterable />
            </t-form-item>

            <t-button theme="default" variant="base" type="reset">重置</t-button>
            <t-button theme="primary" type="submit">查询</t-button>
           
          </t-form>
      </t-card>
</template>

<script setup lang="ts">
  import {ref} from 'vue'

  // 护理项目条件查询表单
  const formData = ref({
    name: "",
    status: -1
  })

  const emits = defineEmits(['query'])

  
  // 启用禁用下拉框
  const statusOptions = ref([
    {label: "请选择状态",value:-1},
    {label: "启用",value:1},
    {label: "禁用",value:0}
  ])


    // 条件查询提交
  function onSubmit(){
    // 收集表单数据，vue默认有双向绑定
    // 调用接口刷新数据即可
    // loadList(formData.value)
    // 通知父组件做查询操作
    emits('query',formData.value)
  }

  function onReset() {
    formData.value = {
      name: "",
      status: "请选择状态"
    }
  }
</script>
